<template>
	<view class="wallet-container">

		<view class="topHeader">
			<view class="header-title">可退款金额 (元)</view>
			<view class="header-money">
				<view class="symbol">¥</view>
				<view class="money">{{ money }}</view>
			</view>
		</view>

		<view class="withdraw-area">
			<view class="withdraw-title">退款金额</view>
			<view class="withdraw-handle">
				<!-- 退款view -->
				<view class="withdraw-view" style="align-items: baseline;">
					<view class="left-column">¥</view>
					<view class="center-column"><input type="digit" class="input" v-model="withMoney" /></view>
					<view class="right-column" @click="toAllWithdraw">全部退款</view>
				</view>
				<!-- <view class="left-right-area">
					<view class="left-column">退款至</view>
					<view class="right-column">
						<view class="paytype">
							<view class="pay-list-item" v-for="(val,key) in withdrawList">
								<view class="pay-item-check">
									<view @click="selectPay(val.key)" class="pay-item-check">
										<image
											:src="checkedWithdraw === val.key ? '/static/public/checked.png' : '/static/public/unchecked.png'"
											mode="aspectFit"
											style="width: 38rpx; height: 38rpx;margin:3rpx 15rpx 0 0;" />
									</view>
								</view>
								<view class="pay-item-name">{{ val.name }}</view>
							</view>
						</view>
						<view class="bindbtn" v-if="selectedAccount.name.length <= 0" @click="toBindWithdraw">去绑定</view>
					</view>
				</view>  

				<view class="left-right-area" v-if="selectedAccount.name.length > 0">
					<view class="left-column">支付宝账号</view>
					<view class="right-column">
						<view class="account">
							{{ selectedAccount.name }}
							{{ selectedAccount.account }}
						</view>
						<view class="bindbtn" @click="toBindWithdraw">更换</view>
					</view>
				</view> -->
				
			</view>
		</view>

		<view class="confirm-btn" 
			:class="{ 'disabled': !canWithdraw }" 
			@click="handleWithdraw"
		>
			立即退款
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				withMoney: '',
				money: '0.00',
				withdrawList: [
					{ 'key': 'alipay', 'name': '支付宝' },
				],
				checkedWithdraw: 'wx_lite',
				selectedAccount: {
					name: '',
					account: ''
				}
			}
		},
		computed: {
			canWithdraw() {
				const amount = Number(this.withMoney)
				return amount > 0 && amount <= Number(this.money)
			}
		},
		onLoad() {
			this.getUserWalletInfo();
		},
		onShow() {
			this.getDefaultAccount();
		},
		methods: {
			getUserWalletInfo() {
				this.$http_api.userWallet({}).then((res)=>{
					this.money = (res.balance / 100).toFixed(2) || 0.00;
				})
			},
			
			handleWithdraw() {
				if (!this.canWithdraw) {
					uni.showToast({
						title: '请输入正确的退款金额',
						icon: 'none'
					})
					return
				}
				
				// if (!this.selectedAccount.name || !this.selectedAccount.account) {
				// 	uni.showToast({
				// 		title: '请先绑定退款账户',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				
				this.confirmWithdraw()
			},
			
			confirmWithdraw() {
				const params = {
					amount: Math.round(Number(this.withMoney) * 100),
					accountName: this.selectedAccount.name,
					accountNumber: this.selectedAccount.account,
					payChannel: this.checkedWithdraw
				}
				this.$http_api.userWithdrawCreate(params).then((res) => {
					uni.$u.toast('退款申请成功');
					setTimeout(() => {
						this.getUserWalletInfo()
						this.withMoney = ''
					}, 1000)
				})
			},
			
			toAllWithdraw() {
				this.withMoney = this.money
			},
			
			selectPay(obj) {
				this.checkedWithdraw = obj
			},
			
			toBindWithdraw() {
				uni.navigateTo({
					url: '/pages/user/wallet/bindWithdrawAccount'
				})
			},
			
			getDefaultAccount() {
				this.$http_api.getWithdrawalAccount({}).then(res => {
					if (res && res.accountName && res.accountNumber) {
						this.selectedAccount = {
							name: res.accountName,
							account: res.accountNumber
						};
					} else {
						this.selectedAccount = {
							name: '',
							account: ''
						};
					}
				}).catch(err => {
					this.selectedAccount = {
						name: '',
						account: ''
					};
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wallet-container {
		background-color: #f0f4f8;
		min-height: 100vh;

		.topHeader {
			height: 220rpx;
			background: linear-gradient(#257EF9 0%, #3498F7 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 80rpx 45rpx 30rpx 45rpx;

			.header-title {
				font-weight: 600;
				font-size: 32rpx;
				color: #ffffff;
			}

			.header-money {
				display: flex;
				color: #ffffff;
				padding: 20rpx;
				font-size: 70rpx;
				font-weight: bold;

				.symbol {
					font-size: 50rpx;
					margin: 20rpx 20rpx 0 0;
				}
			}
		}

		.withdraw-area {
			width: 95%;
			position: relative;
			top: -60rpx;
			left: 0;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			margin: 0 auto;
			background: #ffff;
			padding: 20rpx 0;

			.withdraw-title {
				padding: 40rpx 0 0 40rpx;
				font-size: 30rpx;
				color: #333333;
				font-weight: 500;
			}

			.withdraw-handle {
				padding: 10rpx 40rpx 30rpx 40rpx;

				.withdraw-view {
					border-bottom: 1rpx solid #eee;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 0;

					.left-column {
						width: 60rpx;
						font-weight: 400;
						font-size: 49rpx;
						color: #333333;
						line-height: 68rpx;
					}

					.right-column {
						width: 130rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #42E0A2;
						line-height: 39rpx;
					}

					.center-column {
						flex: 1;

						.input {
							font-size: 70rpx;
							padding: 16rpx;
							height: 100rpx;
						}
					}
				}

				.left-right-area {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 40rpx 20rpx 30rpx 0rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;

					.right-column {
						display: flex;
						align-items: center;

						.account {
							font-weight: 400;
							font-size: 26rpx;
							color: #AAAAAA;
						}

						.bindbtn {
							background: #1C6EFB;
							border-radius: 35rpx;
							color: #ffff;
							padding: 10rpx 25rpx;
							text-align: center;
							align-content: center;
							font-size: 25rpx;
							margin-left: 40rpx;
						}

						.paytype {
							display: flex;

							.pay-list-item {
								display: flex;
							}
						}

					}
				}
			}


		}

		.confirm-btn {
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			padding: 25rpx;
			background-color: #1C6EFB;
			color: #ffffff;
			border-radius: 50rpx;
			text-align: center;
			font-size: 30rpx;
			width: 80%;
			font-weight: 400;

			&.disabled {
				background-color: #cccccc;
				pointer-events: none;
			}
		}
	}
</style>